<template>
  <n-layout-sider
    ref="sider"
    bordered
    :style="{ height: `${innerHeight}px`, width: '272px' }"
    content-style="padding: 0px;background:2c3e50;"
  >
    <n-h2 style="padding: 10px">
      <n-select
        v-model:value="typeSelected"
        filterable
        tag
        :options="typeOptions"
      />
    </n-h2>
    <div class="divider" />

    <n-menu :options="options" style="width: 180px" default-value="1" />
    <div class="divider" />
    <div v-for="(item, index) in templateList" :key="index">
      <n-h2
        :style="{
          padding: '5px',
          margin: '2px',
          background: preview.id == item.id ? 'green' : 'transparent',
        }"
        @click="onPreviewClicked(item)"
      >
        <n-ellipsis style="max-width: 240px">
          <n-thing
            style="padding: 10px"
            :title="item.name"
            :description="item.path"
          />
        </n-ellipsis>
      </n-h2>
      <div class="divider" />
    </div>
  </n-layout-sider>
</template>

<script>
//import Constants from "../contants";
//import IPC from "../background/ipc";
import useWindowSize from "../composables/useWindowSize";
import { useRouter } from "vue-router";
import useTemplateRepositories from "../composables/useTemplateRepositories";
import { ref, onMounted, watch, computed } from "vue";
import { useStore } from "vuex";
//import { useStore } from "vuex";
export default {
  name: "VGPreviewSider",
  props: {},
  setup() {
    const store = useStore();

    const router = useRouter();

    const typeSelected = ref(null);

    const typeOptions = ref([]);

    //const templateSelected = ref(null);

    const { innerHeight } = useWindowSize();

    const reset = (info) => store.commit("preview/reset", info);

    const preview = computed(() => store.state.preview);

    const onPreviewClicked = (item) => {
      reset(item);
    };

    const linkId = ref(router.currentRoute.value.query.linkId);
    const tableId = ref(router.currentRoute.value.query.tableId);

    const { typeList, getTypelist, templateList, getTemplateList } =
      useTemplateRepositories(linkId, tableId);

    onMounted(() => getTypelist());

    watch(
      typeList,
      () => {
        typeOptions.value = typeList.value.map((c) => {
          return {
            label: c,
            value: c,
          };
        });
        typeSelected.value = typeOptions.value[0].value;
      },
      { deep: true }
    );

    watch(typeSelected, async () => {
      await getTemplateList(typeSelected.value);
      reset(templateList.value[0]);
    });

    return {
      innerHeight,
      typeSelected,
      typeList,
      typeOptions,
      templateList,
      preview,
      onPreviewClicked,
    };
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.divider {
  width: 100%;
  background: rgba(255, 255, 255, 0.09);
  height: 1px;
  margin-top: 2px;
  margin-bottom: 2px;
}
</style>
